*{
    margin: 0px;
    padding: 0px;
}
ul{
    list-style: none;
}
header{
    top: 0px;
    width: 7.2rem;
    background-color: #f2f2f2;
    position: sticky;
    z-index: 999;
    top: 0px;
    left: 0px;
    .header{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .logo_img{
        height: .84rem;
        line-height: .38rem;
        img{
            width: .48rem;
            height: .32rem;
            display: inline-block;
            
        }
    }
    .sousuo{
        display: flex;
        span{
            display: block;
            width: .6rem;
            height: .63rem;
            text-align: center;
            background-color: white;
            line-height: .67rem;
            border: 1px solid #e5e5e5;
            border-right: none;
        }
        input{
            width: 4.61rem;
            height: .63rem;
            border: 1px solid #e5e5e5;
            border-left: none;
        }
    }
    .denglu{
        width: .6rem;
        height: .6rem;
        span{
            height: .6rem;
            &::before{
                line-height: .6rem;
                position: absolute;
                right: .27rem;
                top: .13rem;
                font-size: 25px;
            }
        }
    }
    }
    .nav{
        ul{
            display: flex;
            justify-content: center;
            li{
                height: .58rem;
                padding:0rem .30rem ;
                font-size: .25rem;
                line-height: .58rem;
                position: relative;
                &::after{
                    content: "";
                    width: 50%;
                    height: .04rem;
                    background-color: #ed5b00;
                    position: absolute;
                    left: 25%;
                    bottom: 0px;
                    display: none;
                }
            }
            .drowdown{
                position: relative;
                width: 20px;
                span{
                    position: absolute;
                    top:0px;
                    left:0px;
                    /* &:hover{
                        +.drowdown-content{
                            height: 2.49rem;
                        }
                    } */
                }
                .drowdown-content{
                    width: 7.2rem;
                    height: 0rem;
                    background-color: #f2f2f2;
                    padding: 0rem .25rem;
                    position: absolute;
                    left: -6.24rem;
                    top: 0rem;
                    transition: all 1s;
                    z-index: 3;
                    overflow: hidden;
                    h1{
                        font-size: .27rem;
                    }
                    .content{
                        display: flex;
                        flex-wrap: wrap;
                        height: 1.59rem;
                        justify-content: space-between;
                        margin-top: .35rem;
                        a{
                            font-size: 13px;
                            display: inline-block;
                            width: 1.48rem;
                            height: .52rem;
                            text-align: center;
                            line-height: .52rem;
                            background-color: #ffffff;
                            border: .02rem solid #e6e6e6;
                            border-radius: .1rem;
                            color: #656565;
                        }
                        a:nth-child(1){
                            color: #fe8638;
                            background-color: #fde0d5;
                        } 
                    }
                }
            }
            .drowdown:hover{
                .drowdown-content{
                    height: 2.49rem;
                    
                }
            }
            li:hover{
                color: #ed5b00;
            }
            li:hover::after{
                display: block;
            }
        }
    }
}
nav{
    height: 3.59rem;
    width:100%;
    position: relative;
    overflow: hidden;
    div{
        height: 3.59rem;
        display: flex;
        position: relative;
        animation-name: move;
        animation-iteration-count: infinite;
        animation-duration: 6s;
        animation-timing-function: linear;
        animation-fill-mode: both;
        img{
            height: 3.59rem;
            width: 7.2rem;
        }
    }
    ul{
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: .19rem;
        left: 50%;
        li{
            margin-right: .1rem;
            width: .15rem;
            height: .15rem;
            border-radius: 50%;
            background-color: #49494d;
            &:hover{
                background-color: white;
            }
        }
    }
}
article{
    background-color: #f8f9f9;
    .article_1{
        ul{
            display: flex;
            flex-wrap: wrap;
            li{
                width: 20%;
                img{
                    height: 1.52rem;
                    width: 1.44rem;

                }
            }
        }
    }
    .article_2{
        display: flex;
        height: 5.09rem;
        justify-content: space-between;
        .article_2_top{
            img{
                width: 3.57rem;
                height: 5.07rem;
            }
        }
        .article_2_down{
            display: flex;
            height: 5.09rem;
            flex-direction: column;
            justify-content: space-between;
            img{
                width: 3.57rem;
                height: 2.52rem;
            }
        }
    }
    .article_3{
        img{
            width: 7.2rem;
            height: 4.42rem;
        }
    }
    .article_4{
        a{
            text-decoration: none;
            color: white;
        }
        ul{
            width: 7.2rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            li{
                padding: .19rem 0rem;
                width: 3.44rem;
                img{
                    width: 3.44rem;
                    height: 2.78rem;
                }
                section{
                    width: 3.44rem;
                    text-align: center;
                    font-size: .25rem;
                    .p1{
                        color: #777777;
                    }
                    .p2{
                        color: #ed625b;
                        span{
                            color: #777777;
                            text-decoration: line-through;
                        }
                        
                    }
                    div{
                        width: 2rem;
                        height: .58rem;
                        background-color: #ed625b;
                        text-align: center;
                        margin-left: 25%;
                        line-height: .58rem;
                        border-radius: 10px;
                        color:white ;
                    }

                }
            }
        }
        aside{
            height: 1rem;
            width: 7.2rem;
            text-align: center;
            font-size: .25rem;
            line-height: 1rem;
            border-top: 1px solid #cecece;
        }
    }
    .article_5{
        margin-top: .19rem;
        img{
            width: 7.2rem;
            height: 4.4rem
        }
        aside{
            height: 1rem;
            width: 7.2rem;
            text-align: center;
            font-size: .25rem;
            line-height: 1rem;
        }
            
    }
    .article_6{
        background-color: white;
        section{
            img{
                width: 7.2rem;
                height: 4.4rem;
            }
        }
        ul{
            display: flex;
            li{
                img{
                    height: 2.78rem;
                    width: 3.44rem;
                }
                section{
                    width: 3.44rem;
                    text-align: center;
                    font-size: .25rem;
                    .p1{
                        color: #777777;
                    }
                    .p2{
                        color: #ed625b;
                        span{
                            color: #777777;
                            text-decoration: line-through;
                        }
                        
                    }
                    div{
                        width: 2rem;
                        height: .58rem;
                        background-color: #ed625b;
                        text-align: center;
                        margin-left: 25%;
                        line-height: .58rem;
                        border-radius: 10px;
                        color:white ;
                    }

                }
            }
        }
        aside{
            height: 1rem;
            width: 7.2rem;
            text-align: center;
            font-size: .25rem;
            line-height: 1rem;
        }
    }
    .article_7{
        margin-top: 20px;
       img{
           height: 4.4rem;
           width: 7.2rem;
       }
        aside{
            
            height: 1rem;
            width: 7.2rem;
            text-align: center;
            font-size: .25rem;
            line-height: 1rem;
        }
    }
    .article_8{
        margin-top: 20px;
        img{
            height: 4.4rem;
            width: 7.2rem;
        }
        aside{
            height: 1rem;
            width: 7.2rem;
            text-align: center;
            font-size: .25rem;
            line-height: 1rem;
        }
    }
    .article_9{
        ul{
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            li{
                margin-top: .19rem;
                height:4.8rem;
                img{
                    width: 3.57rem;
                    height: 4.8rem;
                }
            }
        }
    }
    .article_10{
        margin-top: .38rem;
        img{
            width: 7.2rem;
            height: 2.78rem;
        }
    }
}
footer{
    height: 1rem;
    width: 7.2rem;
    position: sticky;
    background-color: white;
    bottom: 0px;
    left: 0px;
    ul{
        display: flex;
        align-items: center;
        
        li{
            margin-top: .19rem;
            width: 20%;
            font-size: .25rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            a{
                text-decoration: none;
                color: #999999;
            }
            &:nth-child(1) a{
                color: #de702a;
            }
        }
        img{
            width: .4rem;
            height: .4rem;
            
        }
    }
}
@keyframes move{
    0%{
        left: 0rem;
    }
    32%{
        left: 0rem;
    }
    33%{
        left: -7.2rem;
    }
    65%{
        left: -7.2rem;
    }
    66%{
        left: -14.4rem;
    }
    99%{
        left:-14.4rem;
    }
    100%{
        left: 21.6rem;
    }
}